import { Callout } from '@/components'

# `<QueryClientConsumer/>` Props 변환

<Callout type='info'>

`@suspensive/react-query` & `@tanstack/react-query@4` 환경에서 `@tanstack/react-query@5`로 업데이트하는 경우 추천합니다.

</Callout>

`@suspensive/react-query` & `@tanstack/react-query@5` 환경에서는 `@suspensive/react-query`가 제공하는 `<QueryClientConsumer/>` 컴포넌트의 `context` props가 `queryClient`로 변경되었습니다.

```bash filename="Terminal"
npx @suspensive/codemods migrate-query-client-consumer-props .
```

`context` props를 `queryClient`로 변환할 수 있습니다.

예:

```tsx /context/
const PostRefreshButton = () => {
  return (
    <QueryClientConsumer context={queryClientContext}>
      {(queryClient) => (
        <button
          onClick={() =>
            queryClient.invalidateQueries({
              queryKey: ['posts'],
            })
          }
        >
          Posts refresh
        </button>
      )}
    </QueryClientConsumer>
  )
}
```

변환 후:

```tsx /queryClient/
const PostRefreshButton = () => {
  return (
    <QueryClientConsumer queryClient={queryClient}>
      {(queryClient) => (
        <button
          onClick={() =>
            queryClient.invalidateQueries({
              queryKey: ['posts'],
            })
          }
        >
          Posts refresh
        </button>
      )}
    </QueryClientConsumer>
  )
}
```
